<template>
    <div class="input-box">
      <input @focus="focus" @blur="blur" type="text" @change="change" autocomplete="off"  tabindex="" :maxlength="length" :minlength="length" aria-required="true" v-on:input="$emit('input', $event.target.value)"
       @keyup="onkeyup($event)" @keydown="onkeydown($event)" v-model="inputValue">
      <div class="input-dot" tabindex="0" @click="focus">
          <div class="dot" v-for="(i,index) in length" :key="index" :class="{'active':currentActive===index}">
          <div class="circle" v-show="inputLength>=(index + 1)"></div></div>
      </div>
    </div>
</template>

<script>
export default {
  props: {
    value: {
      default: ''
    },
    length: {
      default: 6
    }
  },
  data () {
    return {
      inputValue: '',
      currentActive: ''
    }
  },
  computed: {
    inputLength () {
      return this.value.length
    }
  },
  methods: {
    setCurrentIndex () {
      if (this.inputLength >= this.length) {
        this.currentActive = this.length - 1
      } else {
        this.currentActive = this.inputLength
      }
    },
    change () {
      this.setCurrentIndex()
    },
    blur () {
      this.currentActive = ''
    },
    focus () {
      this.setCurrentIndex()
    },
    isNumber (keyCode) {
      if (keyCode >= 48 && keyCode <= 57) {
        return true
      }
      if (keyCode >= 96 && keyCode <= 105) {
        return true
      }
      if (keyCode === 8 || keyCode === 46 || keyCode === 37 || keyCode === 39) {
        return true
      }
      return false
    },
    onkeydown (e) {
      if (!this.isNumber(e.keyCode)) {
        e.returnValue = false
      }
      this.setCurrentIndex()
      if (this.inputLength >= this.length) {
        this.$emit('complete')
      }
    },
    onkeyup (e) {
      this.setCurrentIndex()
    }
  }
}
</script>

<style lang="scss" scoped>
  .input-box{
    width: 100%;
    height: 100%;
    position: relative;
    background: url(~/assets/img/rectangle_password.png) no-repeat;
    background-size: 100% 100%;
    input{
      width: 100%;
      height: 100%;
      position: absolute;top: 0px;left: 0px;
      box-sizing: border-box;border: 1px solid red;
      opacity: 0;
    }
    .input-dot{
      display: flex;width: 100%;
      height: 100%;
      box-sizing: border-box;overflow: hidden;
      flex-direction: row;
      .dot{
        flex: 1;border-right: 1px solid #e5e5e5;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        display: flex;
        border-left: 1px solid transparent;
        box-sizing: border-box;
        &:last-of-type{
          border-right-color: transparent;
        }
        &.active{
        //  border-right:1px solid #0091ff;
         &:after{
           content: "";
           height: 60%;
           width: 1px;
           background: #e5e5e5;
         }
        }
        .circle{
          width: 8px;
          background: black;
          border-radius: 50%;
          height: 8px;
        }
      }
    }
  }
</style>
